<template>
  <n-grid x-gap="10" y-gap="10" :col="24">
    <n-gi span="6">
      <div class="custom-choose-item" @click.stop="handleClickAddQuickItem">
        <n-icon size="20">
          <AddOutline />
        </n-icon>
      </div>
    </n-gi>
    <n-gi span="6" v-for="quickItem in quickItemList" :key="quickItem.id">
      <div
        class="custom-choose-item flex items-center justify-center"
        @click.stop="handlClickQuickItem(quickItem)"
      >
        <div class="image">
          <n-image
            preview-disabled
            width="56"
            height="56"
            fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
        </div>
        <div class="title">
          <span> {{ quickItem.variantName }} </span>
        </div>
      </div>
    </n-gi>
  </n-grid>
  <!-- 快速选择 -->
  <QuickItemModal
    :type="bizType"
    :action-type="actionType"
    v-model:show="showQuickItemModal"
    @close="handleHideQuickItemModal"
    @cancel="handleHideQuickItemModal"
  />
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { AddOutline } from "@vicons/ionicons5";
import {
  QuickItemModal,
  useQuickItemModal,
} from "@/components/biz/quickItemModal/index.ts";
import { useVariantQuickItem } from "@/common/hooks/useVariantQuickItem";
import { IQuickItemProps } from "./props";

const props = withDefaults(defineProps<IQuickItemProps>(), {
  type: "sales",
});

const $emits = defineEmits(["select"]);

const {
  modalShowFlag: showQuickItemModal,
  handleShowModal: handleShowQuickItemModal,
  handleHideModal: handleHideQuickItemModal,
} = useQuickItemModal();

const { bizType, actionType, quickItemList, handleGetQuickItemList } =
  useVariantQuickItem(props.type);

const handleClickAddQuickItem = () => {
  handleShowQuickItemModal();
};

const init = () => {
  handleGetQuickItemList();
};

onMounted(() => {
  init();
});

const handlClickQuickItem = (payload: any) => {
  $emits("select", payload);
};
</script>
